﻿<template>
  <section>
    <div class="bar">
      <div v-for="(item, index) in list" :key="index">
        <el-button
          v-for="(btnItem, btnIndex) in item.children"
          type="text"
          :key="btnIndex"
          @click="handleSearch(item.model, btnItem.id, index, btnIndex)"
          :class="{
            activeTab: item.default == `${index}-${btnIndex}`,
          }"
        >
          {{ btnItem.name }}
        </el-button>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "comSearchBar1",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => {
        return [
        ];
      },
    },
  },
  computed: {},
  watch: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    handleSearch(v, x, y, z) {
      this.$emit("search", v, x, y, z);
    },
  },
};
</script>

<style scoped lang="less">
.bar {
  > div {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    > button {
      margin-left: 14px;
      padding-left: 22px;
      padding-right: 22px;
      box-sizing: border-box;
      color: #777;
    }
    .activeTab {
      margin-left: 28px;
      background-color: #2f82ff;
      border-radius: 18px;
      color: #fefefe;
      font-size: 12px;
    }
  }
}
</style>